<template>
	<!--铛铛首页-->
	<view class="page-content" ref="index">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!--品牌logo选择-->
			<view class="page-top-logo">
				<w-sel-logo :itemArr="arrdata" :obj="selobj" @subItemClick="subItemClick"  :currentSubIndex="selIndex"></w-sel-logo>
			</view>
		</view>
		<view class="page-nav">
			<!--banner-->
			<view class="page-top-ban">
				<w-swiper :list="list.slice(0,3)"></w-swiper>
			</view>
			<!--通知-->
			<view class="pag-top-inform">
				<w-notice-bar :list="message" @getmore="getMore" @getdet="getDet"></w-notice-bar>
			</view>
			<!--我的工作-信息-->
			<view class="pag-top-info">
				<w-front-panel :obj="objdata2" @todetail="tolink1" :popOrderStatu="popOrderStatu" :propOrderStatu="propOrderStatu"></w-front-panel>
			</view>
			<!--导航图标-->
			<view class="pag-top-navigation">
				<w-navigation @todetail="tolink2" :proOrderStatu="proOrderStatu" :popOrderStatu="popOrderStatu" :propOrderStatu="propOrderStatu"></w-navigation> 
			</view>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--动态-->
			<template v-if="datalist && datalist.length > 0 ">
			    <!--置顶-->
				<view>
					<block v-for="(item,index) in datalist" :key="index">
						<view v-if="item.order === 1">
							<dynamicInfo :obj="item" @todetail="todetail" @checked="checked" @deleted="deleted" :dynamicStatu="dynamicStatu"
								@comment="(e)=>comment(e,item)" @forcomment="(id,e)=>forcomment(id,e,item)">
								<template #pl-box v-if="item.isPl">
									<view class="pl-box">
										<textarea auto-blur @confirm="confirm(item)" :focus="true" @blur="e=>closePl(item,e)" v-model="item.pl" :auto-height="true" confirm-type="done"  :maxlength="999" ></textarea>
										<view class="submit-box">
											<button @click="confirm(item)" class="submit-btn">发送</button>
										</view>
									</view>
								</template>
							</dynamicInfo>
						</view>
					</block>
				</view>
				<!--不置顶-->
				<view>
					<block v-for="(item,index) in datalist" :key="index">
						<view v-if="item.order === 0">
							<dynamicInfo :obj="item" @todetail="todetail" @checked="checked" @deleted="deleted" :dynamicStatu="dynamicStatu"
								@comment="(e)=>comment(e,item)" @forcomment="(id,e)=>forcomment(id,e,item)">
								<template #pl-box v-if="item.isPl">
									<view class="pl-box">
										<textarea :focus="true" @confirm="confirm(item)"  @blur="e=>closePl(item,e)" v-model="item.pl" :auto-height="true" confirm-type="done"  :maxlength="999" ></textarea>
										<view class="submit-box">
											<button @click="confirm(item)" class="submit-btn">发送</button>
										</view>
									</view>
								</template>
							</dynamicInfo>
						</view>
					</block>
				</view>
				<!--编辑框-->
				<!-- <w-popup :show="showtip">
					<view class="w-tip">
						<view class="w-con">
							<view class="txt-row">
								<input v-model="comments" placeholder="输入评论内容" />
							</view>
						</view>
						<view class="w-but">
							<view class="w-but-txt" @click="cancel" style="color: #FF5454">取消</view>
							<view class="w-but-txt" @click="confirm(item)">确认</view>
						</view>
					</view>
				</w-popup> -->
				<!-- 底部输入栏 -->
				<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard" v-if="is_input">
					<view class="textbox">
						<!-- <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
							@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
							@touchcancel="voiceCancel">{{voiceTis}}</view> -->
						<view class="text-mode" :class="isVoice?'hidden':''">
							<view class="box">
								<textarea auto-height="true" v-model="comments" @focus="textareaFocus" />
								<!-- <input class="input-row-w" type="text" :focus="showSync" v-model="searchVal" placeholder="搜索" confirm-type="search"
								 placeholder-style="color:#ddd" @confirm="confirm"></input> -->
							</view>
						</view>
					</view>
					<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
						<view class="btn">发送</view>
					</view>
				</view>
				
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
		<!-- 添加动态按钮 -->
		<view v-if="showAdd" class="add-btn" @click="addDy">
			<image src="../../static/icon/icon-plus.png"></image>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit">提示</view>
				<view class="w-con">
					<view class="txt-row">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm2">确认</view>
				</view>
			</view>
		</w-popup>
		
	</view>
</template>

<script>
	import wSelLogo from '@/components/w-sel-logo/w-sel-logo.vue'; //品牌logo
	import wSwiper from "@/components/w-swiper/w-swiper2.vue"; //banner
	import wFrontPanel from '@/components/w-front-panel/w-front-panel.vue'; //面板信息
	import wNavigation from '@/components/w-navigation/w-navigation.vue'; //导航图标
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'; //通知
	import wNoticeBar from '@/components/uni-notice-bar/w-notice-bar.vue'; //通知
	import dynamicInfo from '@/pages/index/components/dynamic_info.vue'; //动态
	import wPopup from '@/components/w-popup/w-popup2.vue';// 弹窗
	import loadMore from '@/components/uni-load-more/load-more.vue'
	import indexMixin from './components/index-mixin.js'
	import { getBannerLists, indexNoticeLists, getDynamicLists, topDynamics, delDynamics, replyDynamics, getReplyLists } from '@/common/api.js';
	
	export default {
		mixins:[indexMixin],
		components: {
			wSelLogo,
			wSwiper,
			uniNoticeBar,wNoticeBar,
			wFrontPanel,
			wNavigation,
			dynamicInfo,
			loadMore
		},
		onLoad() {
			//this.isRefresh()
		},
		onShow() {
			this.isRefresh()
		},
		methods: {
			//选择品牌
			subItemClick(index){
				this.currentSubIndex = index;
				this.selobj = this.arrdata[this.currentSubIndex];
				this.setSelIndex(index)
				this.getData2().then(res => {
					let promise = this.tim.logout();
					promise.then(function(imResponse) {
					 let app = getApp()
					 app.getusersig()
					}).catch(function(imError) {
					  console.warn('logout error:', imError);
					});
				})
				
			},
			//跳转更多通告
			getMore(id){
				let type = 'm';
				console.log(223,id)
				uni.navigateTo({
					url: '/pages/news/notification?type='+type+'&id='+id+'&userType=index'
				})
			},
			//跳转更多通告
			getDet(id){
				let type = 'o';
				console.log(223,id)
				uni.navigateTo({
					url: '/pages/news/notification?type='+type+'&id='+id+'&userType=index'
				})
			},
			tolink1(e) {
				console.log(3, e)
				uni.navigateTo({
					url:'/pages/work/work?currentTab=' + e
				})
			},
			tolink2(e) {
				console.log(33, e)
				if(e==='1'){
					uni.navigateTo({
						url:'/pages/picBook/picBookList?pageType=pro&pageStatu=2&userType=index'
					})
				}else if(e==='2'){
					uni.navigateTo({
						url:'/pages/picBook/picBookList?pageType=pop&pageStatu=2&userType=system'
					})
				}else if(e==='3'){
					uni.navigateTo({
						url:'/pages/picBook/picBookList?pageType=prop&pageStatu=2&userType=system'
					})
				}else if(e==='4'){
					uni.navigateTo({
						url:'/pages/noteBook/noteBookList?pageType=' + e
					})
				}
			},
			todetail(e) {
				console.log(333, e)
			},
			deleted(e) {
				console.log(333, e)
				this.dyid = e;
				this.content1 = 'center'
				this.type1 = 'center';
				this.showtip = true;
			},
			confirm2(){
				let params = {
					id: this.dyid
				};
				delDynamics(params).then(res=> {
					if(res.code === 2000){
						uni.showToast({
							icon: 'none',
							title:'删除成功',
							duration: 2000
						})
						this.getDynamic()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2000
						})
					}
				})
				this.showtip = false;
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false;
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
			addDy() {
				uni.navigateTo({
					url:'/pages/index/components/add_dynamic'
				})
			},
			checked(id, e) {
				if (this.datalist && this.datalist.length > 0) {
					this.datalist.forEach(item => {
						if (item.id === id) {
							if (e === 1) {
								item.order = 2
								let params = {
									id: item.id,
									order: item.order
								};
								topDynamics(params).then(res=> {
									if(res.code === 2000){
										uni.showToast({
											icon: 'none',
											title:'取消成功'
										})
										this.getDynamic()
									} else {
										uni.showToast({
											icon: 'none',
											title: res.msg
										})
									}
								})
							} else {
								item.order = 1;
								let params = {
									id: item.id,
									order: item.order
								};
								topDynamics(params).then(res=> {
									if(res.code === 2000){
										uni.showToast({
											icon: 'none',
											title:'置顶成功'
										})
										this.getDynamic()
									} else {
										uni.showToast({
											icon: 'none',
											title: res.msg
										})
									}
								})
							}
						}
					})
				}
			},
			comment(e,item) {
				//this.showtip = true;
				this.forcomid = 0;
				this.dyid = e;
				item['isPl'] = true
				this.showAdd = false
				this.$forceUpdate()
				//this.is_input = true;
			},
			forcomment(id,e,item) {
				this.dyid = id
				this.forcomid = e
				// 显示评论框
				item['isPl'] = true
				this.showAdd = false
				this.$forceUpdate()
			},
			// 获取公告
			getNotice() {
				let params = {
					company_id: this.companyInfo.id
				};
				indexNoticeLists(params).then(res=> {
					this.message = res.data
				})
			},
			// 获取动态
			getDynamic() {
				let params = {
					company_id: this.companyInfo.id,
					type: 2,
					page: 1,
					limit: 5
				};
				getDynamicLists(params).then(res=> {
					if(res.code === 2000){
						let arr = []
						this.datalist = res.data.data.map(val => {
							val.message = []
							return val
						})
						for (let i = 0; i < this.datalist.length; i++) {
							let item = this.datalist[i]
							let params = {
								company_id: item.company_id,
								id: item.id
							};
							getReplyLists(params).then(data=> {
								let index = this.datalist.findIndex(val => val.id == item.id)
								item.message = data.data
								//arr.push(item)
							})
						}
						
						//this.datalist = arr
					}
				})
			},
			isRefresh() {
				this.getNotice()
				this.getDynamic()
			},
			// 评论
			confirm(item){
				let params = {
					dynamic_id: this.dyid,
					content: item.pl,
					top_id: this.forcomid
				};
				replyDynamics(params).then(res=> {
					if(res.code === 2000){
						uni.showToast({
							icon: 'none',
							title:'评论成功'
						})
						this.getDynamic()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			closePl(v,e){
				setTimeout(() => {
				v.isPl = false
				this.showAdd = true
				this.$forceUpdate()
				// 不给个延迟会无法评论 因为blur时已经隐藏了dom 无法触发发送事件
				},1)
				// if(e.detail.height<20){
				
				// }
			}
		},
		onPullDownRefresh() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.pl-box{
		width: 100%;
		min-height: 80rpx;
		max-height: 240rpx !important;
		display: flex;
		margin-block: 20rpx;
		textarea{
			width: 80%;
			max-height: 150rpx !important;
			overflow-y: auto;
			background-color:#cccccc44;
			padding:20rpx;
			border-radius: 20rpx;
			font-size: 30rpx;
		}
		uni-textarea{
			height:auto !important;
		}
		.submit-box{
			width: 20%;
			height:80rpx;
			text-align:center;
			line-height: 120rpx;
			display: flex;
			align-items:center;
			.submit-btn{
				width: 80%;
				height: 60rpx !important;
				background-color:#198EFF;
				color: white;
				border-radius: 50rpx;
				line-height: 60rpx !important;
				font-size: 24rpx;
			}
		}
	}
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}
	.page-nav{
		display: flex;
		flex-direction: column;
		.page-top-ban {
			width: 100%;
			height: 320rpx;
			padding: 0 30rpx;
			margin: 10rpx 0;
		
			.page-top-banner {
				width: 100%;
				height: 320rpx;
			}
		}
		
		.pag-top-inform {
			padding: 0 30rpx;
			margin: 10rpx 0;
		}
		
		.pag-top-info {
			padding: 0 30rpx;
			margin: 10rpx 0;
		}
	}
	
	.page-top {
		display: flex;
		flex-direction: column;
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		.page-top-logo {
			width: 100%;
		}
	}

	.page-body {
		display: flex;
		flex-direction: column;
		padding-bottom: 80rpx;
	}
	
	.add-btn {
		position: fixed;
		right: 40rpx;
		bottom: 200rpx;
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
	
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;
	
		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	
		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
	
			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}
	
			.w-but-txt:last-of-type {
				border-right: none;
			}
		}
	
		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
	
			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $font-color-9;
			}
		}
	}
	
	.input-box{
		width: 100%;
		min-height: 100upx;
		padding: 0 1%;
		background-color: #f2f2f2;
		display: flex;
		position: fixed;
		z-index: 20;
		bottom:0upx;
		left: 0;
		right: 0;
		&.showLayer{transform: translate3d(0,-42vw,0);}
		transition: all .15s linear;
		border-bottom: solid 1upx #ddd;
		.voice,.more{
			flex-shrink: 0;
			width: 90upx;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.send{
			//H5发送按钮左边距
			/* #ifdef H5 */
			margin-left: 20upx;
			/* #endif */
			flex-shrink: 0;
			width: 100upx;
			height: 100upx;
			display: flex;
			align-items: center;
			.btn{
				width: 90upx;
				margin-left: 20rpx;
				height: 56upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background:#198FFF;
				color: #fff;
				border-radius: 6upx;
				font-size: 24upx;
			}
		}
		.textbox{
			width: 100%;
			min-height: 70upx;
			margin-top: 15upx;
			.voice-mode{
				width: calc(100% - 2upx);
				height: 68upx;
				border-radius: 70upx;
				border:solid 1upx #cdcdcd;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				background-color: #fff;
				color: #555;
				&.recording{
					background-color: #e5e5e5;
				}
			}
			.text-mode{
				width: 100%;
				min-height: 70upx;
				display: flex;
				background-color: #fff;
				border-radius: 40upx;
				.box{
					width: 100%;
					padding-left: 30upx;
					min-height: 70upx;
					display: flex;
					align-items: center;
					textarea{
						width: 100%;
						padding:10rpx 0;
						height: 40upx;
					}
				}
				.em{
					flex-shrink: 0;
					width: 80upx;
					padding-left: 10upx;
					height: 70upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
